<!--
 * @Author: your name
 * @Date: 2020-11-04 14:47:47
 * @LastEditTime: 2021-06-01 17:58:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\views\Cart.vue
-->
<template>
  <div class="cart">
    <div class="cart-main" v-if="cart.length === 0">
      <h3>还没有商品哦<br>快去逛逛吧</h3>
    </div>
    <div class="cart-main">
      <van-swipe-cell
        v-for="(shop) in cart"
        :key="`shop-${shop.id}`"
      >
        <template v-if="shop.id">
           <WsCartItem
            :id="parseInt(shop.id)"
            :title="shop.title"
            :price="shop.price"
            :image="shop.image"
            :check="shop.check"
            :count="shop.count"
          />
        </template>
        <template #right>
          <van-button square @click="delShop({ id: shop.id })" text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="cart-footer">
      <van-submit-bar :price="totalMoney * 100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox :value="isAllCheck" @click="toggleAllCheck({ isAllCheck })" >全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'
import WsCartItem from '@/components/WsCartItem'
export default {
  name: 'Cart',
  components: {
    WsCartItem
  },
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalMoney', 'isAllCheck'])
  },
  methods: {
    ...mapMutations(['delShop', 'toggleAllCheck']),
    onSubmit () {
      this.$router.push({
        path: '/ent'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cart {
  height: 100%;
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
  &-main {
    flex: 1;
    padding: 5px 10px;
  }
  h3 {
    font-size: 25px;
    font-family: '宋体';
    text-align: center;
    margin-top: 200px;
    color: #999;
  }
  .van-submit-bar {
    position: static;
  }
  .cart-footer {
    width: 100%;
    border-top: 1px solid rgb(233, 233, 233);
    position: fixed;
    bottom: 50px;
  }
}
.delete-button {
  height: 100%;
}
</style>
